前幾天都在理論，就是為了接下來的實戰做準備，而我們未來會一直開發有趣或實用的功能，並且都以chrome api為開發核心，而今天的實戰主題就是：　Resize視窗

目標功能:

• 使用介面幫視窗調整大小
• 使用快捷鍵調整方向

所以我們必須先有一個介面,可以讓我們使用按鈕，那就在popup裡面放入畫面

/popup/popup.html

    <div id="app">
      <div class="size" data-width="360" data-height="640">360×640</div>
      <div class="size" data-width="375" data-height="667">375×667</div>
      <div class="size" data-width="768" data-height="1024">768×1024</div>
      <div class="size" data-width="1024" data-height="768">1024×768</div>
      <div class="size" data-width="1280" data-height="1024">1280×1024</div>
      <div class="size" data-width="1366" data-height="768">1366×768</div>
      <div class="size" data-width="1440" data-height="900">1440×900</div>
      <div class="size" data-width="1600" data-height="900">1600×900</div>
      <div class="size" data-width="1920" data-height="1080">1920×1080</div>
    </div>
    <div>輸入R鍵可以將視窗放倒</div>

註:浮動畫面(popup)的js以及css必須在popup.html中載入而不是用manifest.json載入

然後用CSS刻一個非常快速粗略的畫面，基本上只要能看出hover到哪個按鈕就好了

/popup/style.css

* {
  box-sizing: border-box;
  font-family: arial;
}

#app {
  height: 200px;
  width: 400px;
  display: flex;
  flex-wrap: wrap;
}
#app .size {
  width: 33.333%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: #037ef3;
  border: 1px solid #fff;
}
#app .size:hover {
  border: 1px solid #ccc;
}

接下來就是宣告事件了，首先我們要在popup js中注入監聽事件，但是我們要先取得當前視窗，並且去操作它的大小，所以會用到的API：chrome.windows的兩個功能 getCurrent() 以及 update() ，但是在使用前記得開啟此api需要的權限

然後就可以寫監控事件了～

/popup/main.js

const app = document.getElementById("app")
//監控按鈕事件
app.addEventListener("click",function(e){
    let element = e.target
    if(element.className === 'size'){
        let updateInfo = {
            width: parseInt(element.dataset.width),
            height: parseInt(element.dataset.height)
        }
        chrome.windows.getCurrent(function(current){
            chrome.windows.update(current.id, updateInfo);
            window.close();
        })
    }
})
//監控按鍵 R 翻轉畫面
document.addEventListener('keydown', function(event) {
    if(event.key.toLowerCase() === 'r'){
        chrome.windows.getCurrent(function(current){
            let updateInfo = {
                width: parseInt(current.height),
                height: parseInt(current.width)
            }
            chrome.windows.update(current.id, updateInfo);
            window.close();
        })
    }
});
  

註:監控事件無法直接寫在onclick，這是chrome extension的規範

再到擴充功能更新插件就完成囉！

作者致歉：因為視窗好像會有一點誤差，而且小於565以下的寬度高度好像都無法順利縮小，加上每日進度所逼，所以以後再補上更完善的code，大家可以做出來玩玩看大概尺寸就好了。